<template>
  <view class="container">
    <!-- 状态提示区域 -->
    <view class="status-area">
      <view class="status-card">
        {{ isLoggedIn ? '恭喜您登陆成功！欢迎使用' : '这是登录页面，请登录' }}
      </view>
    </view>

    <!-- 未登录状态：表单区域 -->
    <view class="form-wrapper" v-if="!isLoggedIn">
      <!-- 手机号输入 -->
      <view class="form-item">
        <input 
          type="text"
          v-model="form.phone"
          class="form-input"
          placeholder="请输入手机号"
        />
      </view>

      <!-- 密码输入 -->
      <view class="form-item">
        <input 
          type="password"
          v-model="form.password"
          class="form-input"
          placeholder="请输入密码"
        />
      </view>

      <!-- 操作按钮组 -->
      <view class="button-area vertical">
        <view class="primary-button" @click="handleLogin">
          <text class="button-text">登录</text>
        </view>
        <view class="secondary-button" @click="handleRegister">
          <text class="button-text">注册</text>
        </view>
      </view>
    </view>

    <!-- 已登录状态：信息展示区域 -->
    <view class="info-wrapper" v-else>
      <!-- 用户信息卡片 -->
      <view class="info-card">
        <view class="welcome-text">欢迎回来！</view>
        <view class="phone-number">{{ maskPhone }}</view>
      </view>

      <!-- 操作按钮 -->
      <view class="button-area">
        <view class="logout-button" @click="handleLogout">
          <text class="button-text">退出登录</text>
        </view>
      </view>
    </view>

    <!-- 背景图片（与index.vue保持统一） -->
    <image class="bg-image" :src="bgImageSrc" mode="aspectFill"></image>
  </view>
</template>

<script>

export default {
	
	data() {
	  return {
	    // 将背景路径定义在data中
	    bgImageSrc: "../../static/images/background.JPG",
	    isLoggedIn: false,
	    form: {
	      phone: '',
	      password: ''
	    }
	  }
	},
	// ...保持原有computed/methods等代码不变
	
  data() {
    return {
      isLoggedIn: false,
      form: {
        phone: '',
        password: ''
      }
    }
  },
  
  computed: {
    // 手机号脱敏处理
    maskPhone() {
      return this.form.phone?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') || ''
    }
  },

  onLoad() {
    this.checkLoginStatus()
  },

  methods: {
    // 检查本地存储的登录状态
    checkLoginStatus() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.isLoggedIn = true
        this.form.phone = userInfo.phone
      }
    },

    // 登录逻辑（保持原有云函数调用）
    async handleLogin() {
      try {
        if (!this.form.phone || !this.form.password) {
          throw new Error('请输入手机号和密码')
        }

        const result = await uniCloud.callFunction({
          name: 'user',
          data: {
            action: 'login',
            data: this.form
          }
        })

        if (result.result.code === 0) {
          uni.setStorageSync('userInfo', result.result.data)
          this.isLoggedIn = true
          uni.showToast({ title: '登录成功' })
        } else {
          throw new Error(result.result.message)
        }
      } catch (error) {
        uni.showToast({ title: error.message, icon: 'none' })
      }
    },

    // 注册逻辑（保持原有云函数调用）
    async handleRegister() {
      try {
        if (!this.form.phone || !this.form.password) {
          throw new Error('请输入手机号和密码')
        }

        const result = await uniCloud.callFunction({
          name: 'user',
          data: {
            action: 'register',
            data: this.form
          }
        })

        if (result.result.code === 0) {
          uni.showToast({ title: '注册成功，请登录' })
        } else {
          throw new Error(result.result.message)
        }
      } catch (error) {
        uni.showToast({ title: error.message, icon: 'none' })
      }
    },

    // 退出登录处理
    handleLogout() {
      uni.removeStorageSync('userInfo')
      this.isLoggedIn = false
      this.form = { phone: '', password: '' }
      uni.showToast({ title: '已退出登录' })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 容器样式（与index.vue统一） */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20rpx;
  position: relative;
}

/* 状态提示区域 */
.status-area {
  margin-top: 80rpx;
  padding: 20rpx;
  
  .status-card {
    background: rgba(255,255,255,0.9);
    border-radius: 20rpx;
    padding: 30rpx;
    text-align: center;
  }
}

/* 表单容器（与index.vue的message-list风格统一） */
.form-wrapper {
  flex: 1;
  padding: 30rpx;
  margin-top: 40rpx;
  position: relative;
  z-index: 1;

  .form-item {
    margin-bottom: 30rpx;
  }

  .form-input {
    height: 80rpx;
    padding: 0 20rpx;
    border-radius: 8rpx;
    background: rgba(255,255,255,0.9);
    border: 1px solid #eee;
  }
}

/* 信息展示区域 */
.info-wrapper {
  flex: 1;
  padding: 30rpx;
  position: relative;
  z-index: 1;

  .info-card {
    background: rgba(255,255,255,0.9);
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .welcome-text {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .phone-number {
      color: #666;
    }
  }
}

/* 按钮样式（与index.vue统一规范） */
.button-area {
  &.vertical {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .primary-button,
  .secondary-button,
  .logout-button {
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:active {
      transform: scale(0.95);
    }
  }

  .primary-button {
    background: #1E334E;
    color: white;
  }

  .secondary-button {
    background: #EFEBDE;
    color: #1E334E;
    border: 1px solid #1E334E;
  }

  .logout-button {
    background: #ff4444;
    color: white;
  }
}

/* 背景图片（与index.vue完全一致） */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  z-index: 0;
}
</style>